/*!
 * Cropper v3.0.0
 * 图片剪裁插件
 */
layui.define(['jquery', 'layer', 'cropper'], function(exports){
  var $ = layui.jquery
    , layer = layui.layer;

  function gethtml(saveW, saveH){

    return "<div class=\"layui-fluid showImgEdit\" style=\"display: none\">" +
      "  <div class=\"layui-form-item\">" +
      "      <div class=\"layui-input-inline layui-btn-container\" style=\"width: auto;\">" +
      "          <label for=\"cropper_avatarImgUpload\" class=\"layui-btn layui-btn-primary\">" +
      "              <i class=\"layui-icon\">&#xe67c;</i>选择图片" +
      "          </label>" +
      "          <input class=\"layui-upload-file\" id=\"cropper_avatarImgUpload\" type=\"file\" value=\"选择图片\" name=\"file\">" +
      "      </div>" +
      "      <div class=\"layui-form-mid layui-word-aux\">图片的尺寸限定" + saveW + "x" + saveH + "px</div>" +
      "  </div>" +
      "  <div class=\"layui-row layui-col-space15\">" +
      "      <div class=\"layui-col-xs9\">" +
      "          <div class=\"readyimg\" style=\"height:450px;background-color: rgb(247, 247, 247);\">" +
      "              <img src=\"\" >" +
      "          </div>" +
      "      </div>" +
      "      <div class=\"layui-col-xs3\">" +
      "          <div class=\"img-preview\" style=\"width:200px;height:200px;overflow:hidden\">" +
      "          </div>" +
      "      </div>" +
      "  </div>" +
      "  <div class=\"layui-row layui-col-space15\">" +
      "      <div class=\"layui-col-xs9\">" +
      "          <div class=\"layui-row\">" +
      "              <button type=\"button\" class=\"layui-btn layui-icon layui-icon-left\" cropper-event=\"rotate\" data-option=\"-15\" title=\"Rotate -90 degrees\"> 向左旋转</button>" +
      "              <button type=\"button\" class=\"layui-btn layui-icon layui-icon-right\" cropper-event=\"rotate\" data-option=\"15\" title=\"Rotate 90 degrees\"> 向右旋转</button>" +
      "              <button type=\"button\" class=\"layui-btn layui-icon layui-icon-refresh\" cropper-event=\"reset\">重置图片</button>" +
      "          </div>" +
      "      </div>" +
      "      <div class=\"layui-col-xs3\">" +
      "          <button class=\"layui-btn layui-btn-fluid\" cropper-event=\"confirmSave\" type=\"button\"> 保存修改</button>" +
      "      </div>" +
      "  </div>" +
      "</div>";
  }

  var obj = {
    render: function(e){
      $('body').append(gethtml(e.saveW, e.saveH));
      var self = this,
        elem = e.elem,
        saveW = e.saveW,
        saveH = e.saveH,
        mark = e.mark,
        area = e.area,
        url = e.url,
        done = e.done;

      var content = $('.showImgEdit')
        , image = $(".showImgEdit .readyimg img")
        , preview = '.showImgEdit .img-preview'
        , file = $(".showImgEdit input[name='file']")
        , options = {aspectRatio: mark, preview: preview, viewMode: 1};

      $(elem).on('click', function(){
        layer.open({
          title: '图片剪裁'
          , type: 1
          , content: content
          , area: area
          , success: function(){
            image.cropper(options);
          }
          , cancel: function(index){
            layer.close(index);
            image.cropper('destroy');
          }
        });
      });
      $(".layui-btn").on('click', function(){
        var event = $(this).attr("cropper-event");
        //监听确认保存图像
        if(event === 'confirmSave'){
          image.cropper("getCroppedCanvas", {
            width: saveW,
            height: saveH
          }).toBlob(function(blob){
            var formData = new FormData();
            formData.append('file', blob, 'head.jpg');
            formData.append('model', e.model);
            $.ajax({
              method: "post",
              url: url, //用于文件上传的服务器端请求地址
              data: formData,
              processData: false,
              contentType: false,
              success: function(result){
                if(result.code === 200){
                  layer.msg('操作成功', {icon: 1});
                  layer.closeAll('page');
                  return done(result.data);
                }else{
                  layer.alert(result.msg, {icon: 2});
                }
              }
            });
          });
          //监听旋转
        }else if(event === 'rotate'){
          var option = $(this).attr('data-option');
          image.cropper('rotate', option);
          //重设图片
        }else if(event === 'reset'){
          image.cropper('reset');
        }
        //文件选择
        file.change(function(){
          var r = new FileReader();
          var f = this.files[0];
          r.readAsDataURL(f);
          r.onload = function(e){
            image.cropper('destroy').attr('src', this.result).cropper(options);
          };
        });
      });
    }
  };
  exports('croppers', obj);
});
